<script lang="ts" setup>
import { onMounted, ref, reactive } from "vue";
import PowerProductionIndexServiceApi from "/@/api/base/bean/power-production-index";
const PowerProductionTableRef = ref();
const props = defineProps({
  queryParam: Object,
});
const PowerProductionListState = reactive({
  targetDates: { targetDate: "" },
  handleSearch: () => PowerProductionTableRef.value.loadTable(),
  queryColumn: [
    { name: "targetDate", type: "custom", label: "年份", slot: "Energydata" },
  ],
  queryParam: { likeAll: null },
  // 日期获取当天前一天
  getdatatime: () => {
    const target = (new Date() as any) - 60 * 60 * 24 * 1000;

    const targets = new Date(target);
    PowerProductionListState.targetDates.targetDate =
      targets.getFullYear() +
      "-" +
      (targets.getMonth() + 1) +
      "-" +
      targets.getDate();
  },
  //表格的列配置
  tableColumn: [
    { label: "序号", width: "50", type: "index" },
    { prop: "targetName", label: "指标项" },
    { prop: "targetValue", label: "值" },
    { slot: "business", label: "业务日期" },
    { slot: "collection", label: "采集时间", sort: { sortable: "custom" } },
    { slot: "state", label: "状态" },
  ],
  //表格数据加载的方法
  loadData: (params: any) =>
    PowerProductionIndexServiceApi.queryTargetInfo({
      ...params,
      ...props.queryParam,
      ...PowerProductionListState.targetDates,
    }),
});

//加载表格数据
onMounted(() => {
  PowerProductionListState.getdatatime();
});

defineExpose({
  getPowerProductionTableRef: () => PowerProductionTableRef.value,
});
</script>
<template>
  {{ PowerProductionListState.targetDates }}
  <jxtech-base-table
    ref="PowerProductionTableRef"
    row-key="id"
    :table-column="PowerProductionListState.tableColumn"
    :load-data="PowerProductionListState.loadData"
    style="width: 100%"
  >
    <!-- 头部的插槽 -->
    <template #header>
      <div class="jxtech-page-table-header-flex">
        <jxtech-search-form
          :query-column="PowerProductionListState.queryColumn"
          :query-form="PowerProductionListState.queryParam"
          :col-span="6"
          @handle-search="PowerProductionListState.handleSearch"
        >
          <template #Energydata>
            <el-date-picker
              type="date"
              placeholder="选择日期"
              size="mini"
              v-model="PowerProductionListState.targetDates.targetDate"
            >
            </el-date-picker>
          </template>
        </jxtech-search-form>
      </div>
    </template>
    <!-- 业务的自定义插槽 -->
    <template #business="{ row }">
      {{ row.targetDate.substring(0, 10) }}
    </template>
    <!-- 采集的自定义插槽 -->
    <template #collection="{ row }">
      {{ row.collectTime == null ? "/" : row.collectTime.substring(0, 16) }}
    </template>
    <!-- 状态的自定义插槽 -->
    <template #state="{ row }">
      {{
        row.status == null
          ? ""
          : row.status == "0"
          ? "正常"
          : row.status == "1"
          ? "归档"
          : "未采集"
      }}
    </template>
  </jxtech-base-table>
</template>
